<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SGA Search</title>
<link type="text/css" rel="stylesheet" href="./inc/css/style.css" />
<script type="text/javascript" src="./inc/js/lib/jquery-1.6.1.min.js" ></script>
<script type="text/javascript" src="./inc/js/slide.js" ></script>
</head>
<body>
	<script type="text/javascript">
		function fsubmit(){
			var genenames = document.getElementById("geneNames").value;
			var eneg = document.getElementById("e_neg").value;
			var pneg = document.getElementById("p_neg").value;
			var epos = document.getElementById("e_pos").value;
			var ppos = document.getElementById("p_pos").value;
			
			if (genenames == ""){
				alert("Gene name cannot be empty.");
				document.getElementById("geneNames").focus();
				return false;
			}

			if (eneg == "" || parseFloat(eneg) == NaN || parseFloat(eneg) > 0){
				alert("Negative epsilon score should be an negative number");
				document.getElementById("e_neg").focus();
				return false;
			}

			if (pneg == "" || parseFloat(pneg) == NaN || parseFloat(pneg) < 0){
				alert("p-value should be a positive number");
				document.getElementById("p_neg").focus();
				return false;
			}

			if (epos == "" || parseFloat(epos) == NaN || parseFloat(epos) < 0){
				alert("Positive epsilon score should be a positive number");
				document.getElementById("e_pos").focus();
				return false;
			}

			if (ppos == "" || parseFloat(ppos) == NaN || parseFloat(ppos) < 0){
				alert("p-value should be a positive number");
				document.getElementById("p_pos").focus();
				return false;
			}
			var frm = document.forms['searchForm'];
			frm.submit();
		}
	</script>
	<div class="wrapper">
    	<div class="textdscp">
        	<div class="title"><b>Description</b></div>
        	<p>Something about the gene</p>
        </div>
        <form id="searchForm" name="searchForm" method="post" action="searchGenes">
        <div class="buttonlist">
        	<div id="select" class="button" ><b>Select Genes</b></div>
            <div id="selectpanel" class="panel">
            	<p><input class="selecttext" id="geneNames" name="geneNames" type="text" /></p>
                <p>Input gene names to search(Example: COG5 COG6 COG7)</p>
            </div>
            <div id="setsearch" class="button" ><span class="longtitle"><b>set search parameters for genetic interaction</b></span></div>
            <div id="searchpanel" class="panel">
                <p>Threshold for <span class="green">negative</span> interactions: SGA epsilon score &lt;= <input type="text" id="e_neg" name="e_neg" value="-0.08" size="5" onclick="if(this.value == '-0.08'){this.value='';}else{this.select();}" onblur="if(this.value==''){this.value='-0.08'}" /> with p-value &lt;= <input type="text" id="p_neg" name="p_neg" value="0.05" onclick="if(this.value == '0.05'){this.value='';}else{this.select();}" onblur="if(this.value==''){this.value='0.05'}" size="5"  /> </p>
                <p>Threshold for <span class="red">positive</span> interactions: SGA epsilon score &gt;= <input type="text" id="e_pos" name="e_pos" value="0.08" size="5" onclick="if(this.value == '0.08'){this.value='';}else{this.select();}" onblur="if(this.value==''){this.value='0.08'}" /> with p-value &lt;= <input type="text" id="p_pos" name="p_pos" value="0.05" size="5" onclick="if(this.value == '0.05'){this.value='';}else{this.select();}" onblur="if(this.value==''){this.value='0.05'}" /> </p>
                <div class="checkbox">
                	<input type="radio" name="rvalue" value="significant" checked />&nbsp;Significant genetic interaction profile correlations (|r| &gt; 0.1)<br />
                	<input type="radio" name="rvalue" value="notsignificant" />&nbsp;Not significant genetic interaction profile correlations 
            	</div>
            </div>
            <div id="setresult" class="button"><span class="longtitle"><b>set result visualization mode</b></span></div>
            <div id="modepanel" class="panel">
            	<div class="container">
            		<ul>
            			<li><input type="radio" name="mode" value="tableview" checked/> Table view</li>
                		<!-- li><input type="radio" name="mode" /> Network view</li>
                		<li><input type="radio" name="mode" /> Both</li -->
                	</ul>
                </div>
            </div>
        </div>
        <div class="gobutton" onclick="fsubmit()"></div>
        </form>
    </div>
</body>
</html>
